import React, { useState, useEffect } from 'react';
import { Select, Input, Button, Table, Menu } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined, AreaChartOutlined, DatabaseOutlined, BarChartOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import styles from './Guangai.module.less';

const Guangai: React.FC = () => {
  const navigate = useNavigate();
  const [selectedValue, setSelectedValue] = useState<string>();
  const [searchText, setSearchText] = useState<string>('');
  const [collapsed, setCollapsed] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [filteredData, setFilteredData] = useState<any[]>([]);

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      width: 60,
      render: (_: any, __: any, index: number) => (currentPage - 1) * 12 + index + 1,
    },
    {
      title: '用水单位名称',
      dataIndex: 'name',
      key: 'name',
      width: 120,
    },
    {
      title: '瞬时流量(m³/s)',
      dataIndex: 'flow',
      key: 'flow',
      width: 120,
    },
    {
      title: '日用水量(万m³)',
      dataIndex: 'dailyUsage',
      key: 'dailyUsage',
      width: 120,
    },
    {
      title: '月用水量(万m³)',
      dataIndex: 'monthlyUsage',
      key: 'monthlyUsage',
      width: 120,
    },
    {
      title: '年用水量(万m³)',
      dataIndex: 'yearlyUsage',
      key: 'yearlyUsage',
      width: 120,
    },
    {
      title: '超额用水量(万m³)',
      dataIndex: 'excessUsage',
      key: 'excessUsage',
      width: 120,
    },
    {
      title: '监测时间',
      dataIndex: 'monitorTime',
      key: 'monitorTime',
      width: 150,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      width: 100,
      render: () => (
        <a onClick={() => navigate('/service/history')}>历史数据</a>
      ),
    },
  ];

  // 模拟数据
  const initialData = [
    {
      key: 1,
      id: 1,
      name: '东风灌区',
      flow: '0.85',
      dailyUsage: '13.69',
      monthlyUsage: '156.32',
      yearlyUsage: '1892.45',
      excessUsage: '13.69',
      monitorTime: '2022-10-10 15:00',
    },
    {
      key: 2,
      id: 2,
      name: '红星水厂',
      flow: '0.92',
      dailyUsage: '15.24',
      monthlyUsage: '168.75',
      yearlyUsage: '2015.63',
      excessUsage: '15.24',
      monitorTime: '2022-10-10 15:00',
    },
    {
      key: 3,
      id: 3,
      name: '阳光灌区',
      flow: '0.78',
      dailyUsage: '12.45',
      monthlyUsage: '142.36',
      yearlyUsage: '1756.82',
      excessUsage: '12.45',
      monitorTime: '2022-10-10 15:00',
    },
    {
      key: 4,
      id: 4,
      name: '清泉水厂',
      flow: '0.95',
      dailyUsage: '16.32',
      monthlyUsage: '175.45',
      yearlyUsage: '2125.36',
      excessUsage: '16.32',
      monitorTime: '2022-10-10 15:00',
    },
    {
      key: 5,
      id: 5,
      name: '丰收灌区',
      flow: '0.82',
      dailyUsage: '14.25',
      monthlyUsage: '162.35',
      yearlyUsage: '1945.62',
      excessUsage: '14.25',
      monitorTime: '2022-10-10 15:00',
    },
    {
      key: 6,
      id: 6,
      name: '新源水厂',
      flow: '0.88',
      dailyUsage: '14.85',
      monthlyUsage: '165.42',
      yearlyUsage: '1985.64',
      excessUsage: '14.85',
      monitorTime: '2022-10-10 15:00',
    },
    // 添加更多数据...
  ];

  // 生成更多数据
  const allData = [...initialData];
  for (let i = 7; i <= 24; i++) {
    allData.push({
      key: i,
      id: i,
      name: i % 2 === 0 ? `第${i}水厂` : `第${i}灌区`,
      flow: (Math.random() * 0.5 + 0.5).toFixed(2),
      dailyUsage: (Math.random() * 10 + 10).toFixed(2),
      monthlyUsage: (Math.random() * 100 + 100).toFixed(2),
      yearlyUsage: (Math.random() * 1000 + 1000).toFixed(2),
      excessUsage: (Math.random() * 10 + 10).toFixed(2),
      monitorTime: '2022-10-10 15:00',
    });
  }

  // 搜索和筛选功能
  useEffect(() => {
    const filtered = allData.filter(item => 
      item.name.toLowerCase().includes(searchText.toLowerCase())
    );
    setFilteredData(filtered);
    setCurrentPage(1); // 重置到第一页
  }, [searchText]);

  // 初始化数据
  useEffect(() => {
    setFilteredData(allData);
  }, []);

  // 处理菜单点击
  const handleMenuClick = (key: string) => {
    switch (key) {
      case '1': // 灌溉用水状化图
        navigate('/service/dongtai');
        break;
      case '2': // 实时数据
        navigate('/service/guangai');
        break;
      case '3': // 统计汇总
        navigate('/service/history');
        break;
      default:
        break;
    }
  };

  const menuItems = [
    {
      key: '1',
      icon: <AreaChartOutlined />,
      label: '灌溉用水状化图',
      onClick: () => handleMenuClick('1'),
    },
    {
      key: '2',
      icon: <DatabaseOutlined />,
      label: '实时数据',
      onClick: () => handleMenuClick('2'),
    },
    {
      key: '3',
      icon: <BarChartOutlined />,
      label: '统计汇总',
      onClick: () => handleMenuClick('3'),
    },
  ];

  // 处理搜索
  const handleSearch = () => {
    const filtered = allData.filter(item => 
      item.name.toLowerCase().includes(searchText.toLowerCase())
    );
    setFilteredData(filtered);
    setCurrentPage(1);
  };

  // 重置搜索
  const handleReset = () => {
    setSearchText('');
    setSelectedValue(undefined);
    setFilteredData(allData);
    setCurrentPage(1);
  };

  return (
    <div className={styles.pageContainer}>
      {/* 左侧菜单 */}
      <div className={`${styles.sideMenu} ${collapsed ? styles.collapsed : ''}`}>
        <div className={styles.menuHeader}>
          <div className={styles.menuTitle}>
            {!collapsed && (
              <>
                <span className={styles.icon}>📊</span>
                <span>用水计量</span>
              </>
            )}
          </div>
          <Button
            type="text"
            className={styles.triggerButton}
            onClick={() => setCollapsed(!collapsed)}
          >
            {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          </Button>
        </div>
        <Menu
          mode="inline"
          defaultSelectedKeys={['2']}
          items={menuItems}
          inlineCollapsed={collapsed}
          className={styles.menu}
        />
      </div>

      {/* 右侧内容区 */}
      <div className={styles.mainContainer}>
        <div className={styles.content}>
          <div className={styles.searchBar}>
            <div className={styles.searchItem}>
              <span>用水单位类型</span>
              <Select
                placeholder="请选择"
                options={[
                  { label: '红星水厂', value: '红星水厂' },
                  { label: '生活用水', value: '生活用水' },
                  { label: '工业用水', value: '工业用水' },
                  { label: '其他用水', value: '其他用水' },
                ]}
                style={{ width: 200 }}
                value={selectedValue}
                onChange={(value) => setSelectedValue(value)}
                allowClear
              />
            </div>
            <div className={styles.searchItem}>
              <span>查找</span>
              <Input
                placeholder="请输入用水单位名称搜索"
                style={{ width: 300 }}
                value={searchText}
                onChange={(e) => setSearchText(e.target.value)}
                allowClear
              />
            </div>
            <Button type="primary" onClick={handleSearch}>查询</Button>
            <Button onClick={handleReset}>重置</Button>
          </div>

          <Table
            columns={columns}
            dataSource={filteredData}
            pagination={{
              total: filteredData.length,
              current: currentPage,
              pageSize: 12,
              showQuickJumper: true,
              showTotal: (total) => `共 ${total} 条数据`,
              onChange: (page) => setCurrentPage(page),
            }}
            className={styles.table}
          />
        </div>
      </div>
    </div>
  );
};

export default Guangai; 